<template>
  <div>
    <h3 style="color: #ffffff; font-size: 24px; text-align: center">空域审批记录界面</h3>
    <div class="main-container">
      <!-- 左半部分：表格 -->
      <div class="table-wrapper" style="width: 45%;">
        <!-- 操作栏：排序方式、搜索框、查询按钮、刷新按钮 -->
        <div class="table-actions">
          <!-- 排序选择 -->
          <select v-model="selectedSort" @change="sortTable" class="larger-select">
            <option value="time">按时间最新</option>
            <option value="id">按序号排序</option>
          </select>

          <!-- 搜索框 -->
          <input
            type="text"
            v-model="searchQuery"
            placeholder="关键字搜索"
            class="larger-input search-input"
          />

          <!-- 查询按钮 -->
          <button @click="filterTable" class="query-button">查询</button>

          <!-- 刷新按钮 -->
          <el-button @click="refreshTable" icon="el-icon-refresh" type="primary" class="larger-button">
            刷新
          </el-button>
        </div>

        <!-- 表格组件 -->
        <good-table :data="tableData" :columns="columns" :pageSize="8" @viewDetails="handleViewDetails" />
      </div>

      <!-- 弹窗 -->
      <div v-if="showDialog" class="dialog-container" style="width: 20%; height: 80%; position: absolute; top: 10vh; right: 20px;">
        <div class="dialog-content">
          <div class="centered-content">
            <!-- 进度条 -->
            <div style="margin-bottom: 20px;">
              <el-progress
                :percentage="getStatusPercentage(selectedDetails.status)"
                text-inside
                stroke-width="20"
                color="#4caf50"
              >
                <template #text>
                  <div class="progress-labels" style="color: white; text-align: center">
                    <span v-if="selectedDetails.status === '未提交'">未提交</span>
                    <span v-if="selectedDetails.status === '已提交'">已提交</span>
                    <span v-if="selectedDetails.status === '审核中'">审核中</span>
                    <span v-if="selectedDetails.status === '审核完成'">审核完成</span>
                  </div>
                </template>
              </el-progress>
            </div>
            <!-- 方案名称 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">方案名称：</p>
              <div class="info-box">
                {{ selectedDetails.schemeName }}
              </div>
            </div>
            <!-- 申报表 ID -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">申报表 ID：</p>
              <div class="info-box">
                {{ selectedDetails.requestId }}
              </div>
            </div>
            <!-- 申请时间 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">申请时间：</p>
              <div class="info-box">
                {{ selectedDetails.applicationTime }}
              </div>
            </div>
            <!-- 接收时间 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">接收时间：</p>
              <div class="info-box">
                {{ selectedDetails.receiveDate }}
              </div>
            </div>
            <!-- 审批状态 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">审批状态：</p>
              <div class="info-box">
                {{ selectedDetails.status }}
              </div>
            </div>
            <!-- 单位名称 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">单位名称：</p>
              <div class="info-box">
                {{ selectedDetails.companyName }}
              </div>
            </div>
            <!-- 联系人 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">联系人：</p>
              <div class="info-box">
                {{ selectedDetails.contactPerson }}
              </div>
            </div>
            <!-- 联系电话 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">联系电话：</p>
              <div class="info-box">
                {{ selectedDetails.contactPhone }}
              </div>
            </div>
            <!-- 航空器类型 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">航空器类型：</p>
              <div class="info-box">
                {{ selectedDetails.aircraftType }}
              </div>
            </div>
            <!-- 起飞机场 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">起飞机场：</p>
              <div class="info-box">
                {{ selectedDetails.departureAirport }}
              </div>
            </div>
            <!-- 降落机场 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">降落机场：</p>
              <div class="info-box">
                {{ selectedDetails.arrivalAirport }}
              </div>
            </div>
            <!-- 规划内容 -->
            <div style="margin-bottom: 15px; display: flex; align-items: center;">
              <p style="color: rgba(135, 183, 218, 1); margin-right: 10px;">规划内容：</p>
              <div class="info-box">
                {{ selectedDetails.planningContent }}
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <!-- 关闭按钮 -->
          <button @click="showDialog = false" style="color: white">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ListTitle from "@/components/ListTitle";
import axios from "axios";
import GoodTable from "@/components/GoodTable.vue";

export default {
  name: "Module2ApprovalRecord",
  components: {
    GoodTable,
    ListTitle
  },
  data() {
    return {
      showDialog: false,
      selectedDetails: {
        schemeName: '',
        requestId: '',
        applicationTime: '',
        receiveDate: '',
        status: '',
        companyName: '',
        contactPerson: '',
        contactPhone: '',
        aircraftType: '',
        departureAirport: '',
        arrivalAirport: '',
        planningContent: ''
      },
      selectedSort: "id",
      searchQuery: "",
      tableData: [],
      columns: [
        { prop: "id", label: "序号" },
        { prop: "requestId", label: "申请单 ID" },
        { prop: "receiveDate", label: "接收时间" },
        { prop: "status", label: "申请状态" },
        { prop: "action", label: "操作" },
      ],
      customTextColor: "#555", // 自定义字体颜色，你可以根据需要修改
    };
  },
  created() {
    // 页面加载时获取数据
    this.fetchTableData();
  },
  methods: {
    // 获取表格数据
    async fetchTableData() {
      try {
        const response = await axios.post("/api/getAirspaceData", {
          sort: this.selectedSort,
          query: this.searchQuery,
        });
        if (response.data.code === 200) {
          this.tableData = response.data.data;
        } else {
          console.error("服务器响应错误，状态码：", response.status);
        }
      } catch (error) {
        console.error("获取表格数据失败", error);
      }
    },
    sortTable() {
      // 重新获取排序后的数据
      this.fetchTableData();
    },
    filterTable() {
      // 触发搜索过滤，重新获取数据
      this.fetchTableData();
    },
    refreshTable() {
      // 刷新表格数据，重置搜索和排序
      this.selectedSort = "id";
      this.searchQuery = "";
      this.fetchTableData();
    },
    handleViewDetails(row) {
      this.selectedDetails = {
        schemeName: row.schemeName || '',
        requestId: row.requestId || '',
        applicationTime: row.applicationTime || '',
        receiveDate: row.receiveDate || '',
        status: row.status || '',
        companyName: row.companyName || '',
        contactPerson: row.contactPerson || '',
        contactPhone: row.contactPhone || '',
        aircraftType: row.aircraftType || '',
        departureAirport: row.departureAirport || '',
        arrivalAirport: row.arrivalAirport || '',
        planningContent: row.planningContent || ''
      };
      this.showDialog = true;
    },
    getStatusPercentage(status) {
      switch (status) {
        case "未提交":
          return 0;
        case "已提交":
          return 33;
        case "审核中":
          return 66;
        case "审核完成":
          return 100;
        default:
          return 0;
      }
    },
  },
};
</script>
<style scoped>
h3 {
  color: #ffffff;
  font-size: 24px;
  text-align: center;
}

.main-container {
  display: flex;
}

.table-wrapper {
  padding: 20px;
}

.table-actions {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.larger-select {
  background-color: #1f1f1f;
  color: #ffffff;
  border: none;
  padding: 10px;
  font-size: 16px;
  margin-right: 15px;
}

.larger-input {
  background-color: #1f1f1f;
  color: #ffffff;
  border: none;
  padding: 10px;
  font-size: 16px;
  width: 300px;
  margin-right: 15px;
}

.query-button {
  background-color: #007bff;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}
.larger-button {
  background-color: #007bff;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  margin: auto;
}

.el-button {
  background-color: #007bff;
  border-color: #007bff;
}

.el-button:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* 弹窗样式 */
.dialog-container {
  background-image: url("../assets/img/test/bg.png");
  background-size: 100% 100%;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dialog-content {
  flex-grow: 1;
  overflow-y: auto;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialog-footer button {
  padding: 10px 20px;
  background-color: #007bff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.dialog-footer button:hover {
  background-color: #0056b3;
}

.centered-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.info-box {
  position: relative;
  background-image: url('../assets/img/test/text.png');
  background-size: cover;
  padding: 0px;
  width: 200px;
  height: 40px;
}
</style>
